<meta name="referrer" content="never">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<style>
    #decorateApp {
        font-family: Source Han Sans SC;
        background: #fff;
        height: calc(100vh - 63px);
        padding: 0 20px;
        overflow: hidden;

    }

    .component-item {
        /* padding-top: 30px; */
        background: #fff;
        margin: 0 0 5px;
        padding: 0px 10px 0;
        /* border-radius: 10px; */
    }

    .component-item-special {
        margin: 0 0 5px;
        border-radius: 0px;
    }

    .component-item-search {
        margin: 0;
        border-radius: 0px;
        height: 50px;
        padding: 9px 10px;
    }

    .component-item-list {
        background: #eee;
    }

    .selected {
        border: 1px solid #f66161;
    }

    /* .form-horizontal .form-group {
        margin: 0;
    } */

    .btn-common {
        width: 74px;
        height: 30px;
        line-height: 28px;
        background: #EEEAF7;
        border: 1px solid #B092E1;
        border-radius: 4px;
        color: #804ED1;
        font-size: 12px;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
    }

    .margin-left-20 {
        margin-left: 20px;
    }



    .app-web::-webkit-scrollbar {
        width: 0px
    }

    .decorate-left::-webkit-scrollbar {
        width: 0px
    }

    .decorate-title {
        height: 66px;
        display: flex;
        justify-content: space-between;

        align-items: center;
        color: #444;
    }

    .title-msg {
        font-style: 14px;
        font-weight: 600;
    }

    .title-btn {
        display: flex;
        align-items: center;
    }

    .title-btn-1,
    .title-btn-2,
    .title-btn-3 {
        width: 88px;
        height: 32px;
        line-height: 30px;
    }

    .title-btn-2 {
        margin: 0 30px;
    }

    .title-btn-3 {
        background: #804ED1;
        color: #fff;
    }

    .decorate-body {
        height: calc(100vh - 129px);
        display: flex;
    }


    .decorate-left {
        width: 260px;
        box-sizing: border-box;
        height: 100%;
        overflow: auto;
        flex-shrink: 0;
    }

    .decorate-left>div {
        margin-bottom: 14px;
    }

    .decorate-left>div:last-child {
        margin-bottom: 0px;
    }

    .center-body {
        flex: 1;
        background: #F2F2F6;
        display: flex;
        justify-content: center;
        margin: 0 16px;
        border-radius: 10px 10px 0px 0px;
        padding: 40px 0 64px;
        position: relative;
    }

    .decorate-body-buttom {
        position: absolute;
        bottom: 0;
        height: 54px;
        width: 100%;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px -6px 4px 0px rgba(25, 25, 25, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .decorate-body-buttom-item {
        margin-right: 10px;
        border: 1px solid #E6E6E6;
        color: #999;
        background: #fff;
    }

    .decorate-body-buttom-item:last-child {
        margin: 0;
    }

    .decorate-body-buttom-item-active {
        color: #fff;
        background: #804ED1;
    }

    .decorate-center-container::-webkit-scrollbar {
        width: 0px
    }

    .decorate-center-container {
        width: 375px;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        background: #f6f6f6;
        position: relative;
    }

    .decorate-left-con {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #eee;
        padding-left: 8px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .decorate-left-con:nth-child(3n) {
        margin-right: 0;
    }


    .drog-title {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .decorate-link {
        text-align: center;
        border-radius: 0;
        color: #444444;
        font-size: 12px;
        padding: 10px 0 10px;
        float: left;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        width: 75px;
        height: 75px;
        margin: 8px 8px 8px 0px;
        border: 1px solid #eee;
        background: #F7F7FA;
        border-radius: 4px;
    }

    .decorate-link>img {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
    }

    .decorate-right {
        height: calc(100vh - 129px);
        overflow: auto;
        overflow-x: hidden;
    }

    .decorate-right-header {
        padding: 8px 10px;
        font-size: 12px;
    }

    .decorate-right-header img {
        width: 34px;
        height: 34px;
        margin-right: 18px;

    }

    .decorate-right-header-title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 34px;
    }

    .decorate-right-write {
        margin: 10px;
    }

    .decorate-right-write .select-img {
        width: 78px;
        height: 38px;
    }

    .decorate-right-write .select-imgzheng {
        width: 38px;
        height: 38px;
    }

    .select-style-con {
        background: #F7F7FA;
        border: 1px solid #eee;
        color: #999;
        position: relative;
        padding: 12px 92px 48px;
        border-radius: 4px;
    }

    .select-style-con>img {
        width: 100%;
        height: 100%;
    }

    .select-style-item {
        margin: 16px 0;
        padding-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 4px;
        color: #444;
    }

    .select-style-item-title,
    .select-style-item-box {
        padding-left: 15px;
    }

    .select-style-item-title {
        background: #EFEFEF;
        height: 40px;
        margin: 0;
        line-height: 40px;
    }

    .select-style-item-box {
        height: 38px;
        margin-top: 10px;
    }

    .select-style-item-tip {
        line-height: 38px;
    }

    .select-style-item-select {
        line-height: 38px;
        height: 38px;
        display: flex;
        align-items: center;
    }

    .tip-line {
        line-height: 30px;
    }

    .input-select-inline {
        display: flex;
        align-items: center;
    }

    .input-select-inline .el-input {
        width: 80%;
    }

    .input-select-inline .el-input__inner {
        border-radius: 4px 0px 0px 4px;
        border-right: 0;
    }

    .input-select-inline .input-select-btn {
        width: 50px;
        height: 30px;
        line-height: 26px;
        background: #7536D0;
        border-radius: 0px 4px 4px 0px;
        color: #fff;
    }

    .radio-tip,
    .item-radio-group,
    .search-tip {
        height: 30px;
        line-height: 30px;

    }

    .el-radio {
        line-height: 30px;
    }

    .box-radio {
        margin-bottom: -16px;
    }

    .el-radio__input.is-checked .el-radio__inner {
        background: #804ED1;
        border-color: #804ED1;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #804ED1;
    }

    .detele-item {
        text-align: right;
        padding-right: 16px;
        font-size: 12px;
        color: #888888;
    }

    .detele-item span {
        cursor: pointer;
    }

    .chooseAdvPic {
        height: 38px;
        background: #EEEAF7;
        width: 100%;
        border: none;
        color: #804ED1;
        font-size: 16px;
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 0px 4px 4px 0px;
        line-height: 38px;
        text-align: center;
        cursor: pointer;
    }

    .item {
        text-align: center;
        position: relative;

    }

    .item img {
        width: 100%;
        height: 100%;
    }

    .item-close {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        line-height: 20px;
        text-align: center;
        /* background: #f00; */
        z-index: 200;
    }

    .item-close I {
        color: #f66161;
        font-size: 20px;
    }

    .banner-add-btn {
        border: 1px dashed #6b7685;
        line-height: 32px;
        height: 32px;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }

    .right-container-iframe {
        display: flex;
        justify-content: center;
    }

    #preview {
        border: none;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        border-radius: 26px;
    }

    .right-container {
        background: #fff;
        height: calc(100vh - 130px);
        width: 350px;
    }

    .board-item {
        position: relative;
    }

    .hide-item {
        display: none;
    }

    .sortable-ghost {
        height: 50px;
        overflow: hidden;
    }

    .sortable-ghost .hide-item {
        height: 50px;
        z-index: 1000;
        position: absolute;
        background: #fff;
        width: 100%;
        line-height: 50px;
        text-align: center;
        color: #2589ff;
        display: block;
    }

    .hide-item-left {
        position: absolute;
        z-index: 1000;
        height: 70px;
        background: #f00;
        left: 0;
        top: 0;
        display: none;
    }

    .el-dialog {
        width: 700px;
        height: 740px;
        border-radius: 10px;
    }

    .el-dialog__header {
        border-radius: 10px 10px 0 0;
    }

    .el-dialog__body {
        padding: 50px 40px 50px 75px;
    }

    .preview-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .web-preview {
        height: 594px;
        width: 300px;
        background: url('/assets/addons/shopro/img/decorate/preview_bg.png');
        padding: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .code-preview {
        width: 200px;
        height: 594px;
        padding: 28px 0;
        display: flex;
        /* justify-content: space-between; */
        flex-direction: column;
    }

    .template-title {
        font-size: 18px;
        color: #444;
        margin-bottom: 14px;
    }

    .template-company {
        color: #999;
        font-size: 12px;
    }

    .template-copyright {
        color: #999;
        font-size: 12px;
        margin-bottom: 14px;
    }

    .template-platform {
        color: #FF5306;
        font-size: 14px;
        display: flex;
    }

    .template-platform img {
        margin-right: 5px;
    }

    .wechart-code {
        margin-top: 34px;
    }

    .code-title {
        margin-top: 18px;
        font-size: 12px;
        color: #999;
    }

    .code-item {
        width: 132px;
        height: 132px;
    }

    .code-item-img {
        width: 100%;
        height: 100%;
    }

    /* 底部导航 */
    .select-color {
        display: flex;
        align-items: center;
        border-radius: 5px;
        border: 1px solid #eee;
    }

    .el-color-picker__color-inner {
        border-radius: 0 5px 5px 0;
        border: 1px solid #C0C4CC;
    }

    .select-color .el-input__inner,
    .el-color-picker__trigger,
    .el-color-picker__color {
        border: none;
    }

    .el-color-picker__trigger {
        padding: 0;
    }

    .el-radio {
        margin-right: 12px;
    }

    .tabbar-body-item {
        bottom: 0px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background: #fff;
    }

    /* 标题栏 */
    .select-style-block {
        padding-bottom: 0px;
    }

    .title-block-body {
        background: #F6F6F6;
    }

    .title-block-title {
        position: absolute;
        left: 50%;
        top: 5px;
        margin-left: -40px;
        width: 70px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-style: 14px;
    }

    .title-block-style {
        width: 100%;
        height: 40px;
        margin-bottom: 8px;
    }

    .title-block-btn {
        /* width: 338px; */
        height: 42px;
        line-height: 42px;
        border-radius: 0px 0px 6px 6px;
        background: #EEEAF7;
        font-style: 16px;
        color: #804ED1;
        text-align: center;
        cursor: pointer;
    }

    .nav-bg {
        width: 100%;
        height: 58px;
        position: relative;
    }

    .el-drawer .rtl {
        width: 338px;
    }

    .one-ellipsis {
        display: block;
        width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #float-button {
        position: absolute;
        bottom: 50px;
        right: 25px;
    }

    .gg {
        margin-top: -10000px !important;
        z-index: -1000 !important;
    }

    .el-dialog__title {
        font-size: 16px;
    }

    .el-dialog__headerbtn .el-dialog__close {
        font-size: 18px;
    }

    .el-dialog__headerbtn .el-dialog__close:hover {
        color: #7438D5;
    }

    /* 轮播图 */
    .el-carousel__button {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

    /* adv */
    .adv-box {
        width: auto;
        height: 160px;
    }

    .adv-item-updown {
        flex-direction: column;
    }

    .leftright {
        display: flex;
    }

    .leftright>div {
        width: 50%;
    }

    .adv-1,
    .adv-2,
    .adv-3,
    .adv-4,
    .adv-5,
    .adv-6,
    .adv-7 {
        height: 100%;
        /* width: 100%; */
    }

    .adv-2,
    .adv-3,
    .adv-4,
    .adv-7-item {
        display: flex;
    }

    .adv-2-item,
    .adv-3-item,
    .adv-4-item {
        width: 50%;
    }

    .adv-3-item .height-50,
    .adv-4-item .height-50 {
        height: 50%;
    }

    .adv-5-item,
    .adv-6-item,
    .adv-7-item {
        height: 50%;
    }

    .adv-7-item-top>div {
        width: 50%;
    }

    .adv-7-item-bottom>div {
        width: 33.3%;
    }

    .order-card-box,
    .wallet-card-box {
        width: auto;
    }

    /* 商品 */
    .goods-list-box {
        display: flex;
        flex-wrap: wrap;
    }

    .goods-list-item {
        border-radius: 10px;
        background: #fff;
        margin-bottom: 5px;
    }

    .goods-list-img {
        background-color: #ccc;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .goods-list-tit {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 18px;
        height: 36px;
        margin: 10px 10px 5px;
        text-align: left;
    }

    .goods-list-subtitle {
        text-align: left;
        width: 100%;
        line-height: 28px;
        background: #f6f2ea;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #a8700d;
        padding: 0 10px;
    }

    .ellipsis-more {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .goods-list-price {
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
    }

    .goods-price {
        color: #e1212b
    }

    .goods-sales {
        color: #999;
    }

    /* menu */
    .menu-box {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 16px;
    }

    .menu-box-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0 0;
    }

    /* 优惠券 */
    .coupons-container {
        background: #fff;
        padding-bottom: 10px;
    }

    .compotent-coupons1-item {
        height: 84px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        -webkit-mask: url('/assets/addons/shopro/img/decorate/coupon_bg1.png') no-repeat;
        mask: url('/assets/addons/shopro/img/decorate/coupon_bg1.png') no-repeat;
        -webkit-mask-size: 350px 84px;
        mask-size: 350px 84px;
        padding: 0 20px;
        text-align: left;
        margin: 0 12px;
        position: relative;
    }

    .coupons-amount {
        font-size: 27px;
        font-weight: 700;
        line-height: 27px;
    }

    .coupons-enough {
        font-size: 11px;
        margin-top: 3px;
        text-align: left;
    }

    .coupons-time {
        font-size: 11px;
        margin-top: 5px;
        text-align: left;
    }

    .coupons-get {
        width: 71px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        background: #fff;
        border-radius: 13px;
        padding: 0;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
    }

    .coupons-stock {
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 500;
        margin-top: 7px;
        text-align: center;
    }

    /* 拼团,秒杀 */
    .activity-box {
        overflow: hidden;
    }

    .activity-header {
        display: flex;
        align-items: center;
        height: 50px;
        justify-content: space-between;
        padding: 0 10px;
    }

    .activity-header-tip {
        color: #333;
        font-size: 16px;
        font-weight: 700;
    }

    .activity-more {
        font-size: 14px;
        padding-left: 15px;
        color: #666;
    }

    .activity-body {
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .activity-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }

    .activity-item-img {
        width: 76px;
        position: relative;
        height: 76px;
    }

    .team_num {
        position: absolute;
        left: 0;
        bottom: 0px;
        z-index: 2;
        line-height: 17px;
        background: -webkit-linear-gradient(318deg, #f3dfb1, #f3dfb1, #ecbe60);
        background: linear-gradient(132deg, #f3dfb1, #f3dfb1, #ecbe60);
        border-radius: 0 9px 9px 0;
        padding: 0 5px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 700;
        color: #784f06;
    }

    .activity-price {
        font-size: 15px;
        font-weight: 500;
        color: #e1212b;
    }

    .activity-originalprice {
        font-size: 10px;
        font-weight: 400;
        text-decoration: line-through;
        color: #999;
    }

    /* 小程序 */
    .live-box {
        /* height: 192px; */
        height: 220px;
    }

    .live-body {
        display: flex;
        align-items: center;
    }

    .live-item:nth-child(2n-1) {
        margin-right: 10px;
    }

    .non-existent {
        width: 100%;
        color: #f00;
    }

    .el-image {
        width: 100%;
        height: 100%;
    }

    .el-image__error {
        font-size: 12px;
        width: 100%;
        height: 100%;
    }


    .image-slot {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .decorate-center-container-scrollbar::-webkit-scrollbar {
        width: 6px;
    }

    .decorate-center-container-scrollbar::-webkit-scrollbar-thumb {
        width: 6px;
        background: #ccc;
        height: 20px;
        border-radius: 3px;
    }

    .center-body .el-row {
        width: 100%;
        /* margin: 0 !important; */
    }

    .image-border {
        border: 1px solid #e6e6e6;
    }

    #popupContainer .image-slot {
        font-size: 40px;
        color: #999;
    }

    #float-button-box .image-slot {
        font-size: 16px;
    }

    .home-custom {
        height: calc(100% - 65px);
    }

    .compotent-grid-list-item-tip {
        height: 12px;
        line-height: 12px;
    }

    .el-carousel__indicators--horizontal {
        display: none;
    }

    [v-cloak] {
        display: none
    }

    .left-menu-title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 44px;
        height: 44px;
        background: #F7F7FA;
        padding-left: 16px;
        box-sizing: border-box;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
    }

    .left-menu-container {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0 8px 8px;
        border: 1px solid #eee;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .left-menu-container-item {
        text-align: center;
        color: #444444;
        font-size: 12px;
        padding: 10px 0 10px;
        cursor: pointer;
        width: 75px;
        height: 75px;
        margin: 8px 8px 0px 0px;
        border: 1px solid #eee;
        background: #F7F7FA;
        border-radius: 4px;
    }

    .left-menu-container-item img {
        width: 30px;
        height: 30px;
    }

    .center-body .left-menu-container-item {
        width: 100%;
    }

    .compotent-item-container {
        position: relative;
    }

    .compotent-item-container-item {
        background: #fff;
    }

    .compotent-item-container-item-padding {
        padding: 10px;
    }

    .compotent-item-container-item-margin {
        margin-bottom: 5px;
    }

    .compotent-search {
        width: auto;
        height: 32px;
        background: #f5f5f5;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .compotent-search i {
        margin-right: 10px;
    }

    /* adv */
    .display-flex {
        display: flex;
    }

    .adv-width-100 {
        width: 100%;
    }

    .adv-height-100 {
        height: 100%;
    }

    .adv-width-50 {
        width: 50%;
    }

    .adv-height-50 {
        height: 50%;
    }

    .adv-width-33 {
        width: 33.3%;
    }

    .adv-line-right {
        border-right: 8px solid #F6F6F6;
    }

    .adv-line-bottom {
        border-bottom: 8px solid #F6F6F6;
    }

    .compotent-adv {
        padding: 0 12px;
    }

    .compotent-adv .el-image {
        overflow: hidden;
        border-radius: 5px;
    }

    .compotent-adv-1 {
        height: 110px;
    }

    .compotent-adv-2 {
        height: 110px;
        display: flex;
    }

    .compotent-adv-2>div:first-child {
        border-right: 4px solid #F6F6F6;
    }

    .compotent-adv-2>div:last-child {
        border-left: 4px solid #F6F6F6;
    }

    .compotent-adv-3,
    .compotent-adv-4 {
        height: 184px;
        display: flex;
    }

    .compotent-adv-5,
    .compotent-adv-6,
    .compotent-adv-7 {
        height: 184px;
    }

    /* nav-list-box */

    .compotent-nav-list-item {
        height: 50px;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.5px solid #f3f3f3;
    }

    .compotent-nav-list-item-left {
        display: flex;
        align-items: center;
        /* width: 42px; */
        height: 42px;
        flex: 1;
    }

    .compotent-nav-list-item .compotent-nav-list-item-image {
        width: 22px;
        height: 22px;
        margin-right: 10px;
    }

    /* compotent-grid-list-item */
    .compotent-grid-list-container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-bottom: 16px;
        min-height: 72px;
    }

    .compotent-grid-list-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0 0;
        height: 58px;
    }

    .compotent-grid-list-item-image {
        width: 44px;
        height: 44px;
        margin-bottom: 14px;
    }

    /* rich-text */
    .compotent-rich-text {
        min-height: 50px;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    /* compotent-title-block-container */

    .compotent-title-block-container {
        position: relative;
    }

    .compotent-title-block-title {
        position: absolute;
        left: 50%;
        top: 5px;
        margin-left: -40px;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .sortable-ghost {
        background: #fff;
        border-radius: 10px;
    }

    .seat-item {
        display: none;
    }

    .sortable-ghost .seat-item {
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: center;
        background: #EEEAF7;
    }

    .sortable-ghost .compotent-item-container {
        display: none;
    }

    .clone-item {
        /* color: #ff0; */
    }

    .dragin-item {
        background: #ff0;
    }

    .menu-item-tip {
        margin-top: 8px;
    }

    /* .onerow-compotent-activity-container {
        width: 100%;
    }

    .onerow-compotent-activity-list {
        width: 100%;
        height: 120px;
        background: #FFFFFF;
        margin-bottom: 10px;
        display: flex;
        text-align: left;
        padding: 10px 0;
        border-bottom: 1px solid #DFDFDF;
    }

    .onerow-compotent-activity-list:last-child {
        border: none;
        margin-bottom: 0;
    } */

    .onerow-compotent-seckill-list {
        height: 130px;
    }

    .compotent-goods-list-seckill {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
    }

    .compotent-goods-list-progress {
        width: 106px;
        margin-right: 10px;
    }

    .compotent-goods-list-progress .el-progress-bar {
        padding-right: 0;
    }

    /* .compotent-goods-list-rate {
        line-height: 1;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        transform: scale(0.83);
    } */

    .onerow-seckill-message {
        align-items: flex-start;
    }

    .onerow-goods-message {
        margin-top: 20px;
    }

    .ellipsis-item {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .compotent-item-header {
        position: absolute;
        top: 38px;
        z-index: 100;
        width: 100%;
        padding: 0 12px;
    }

    .header-name {
        align-items: center;
        width: 100%;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #fff;
        position: absolute;
        z-index: 10;
        top: 30px;
        padding: 0 12px;
    }

    .header-input {
        width: 33px;
        height: 33px;
        background: rgba(255, 255, 255, 0.17);
        border: 1px solid rgba(255, 255, 255, 0.17);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-compotent-image {
        width: 49px;
        height: 49px;
        /* border-radius: 50%; */
        overflow: hidden;
    }

    .compotent-goods-list-container {
        flex: 1;
        padding-right: 12px;
    }

    .compotent-goods-list-2-container {
        flex: 1;
    }

    .compotent-goods-list-1-container {
        padding: 0 12px;
        text-align: left;
    }

    .compotent-goods-list-1 {
        background: #fff;
        margin-bottom: 6px;
        border-radius: 10px;
        overflow: hidden;
        background-size: 170px 120px;
        background-repeat: no-repeat;
        background-position: left bottom;
        height: calc(100% - 6px);
    }

    .compotent-goods-list-1-seckill {
        background-image: url('/assets/addons/shopro/img/decorate/seckill-card11.png');
    }

    .compotent-goods-list-1-groupon {
        background-image: url('/assets/addons/shopro/img/decorate/groupon-card11.png');
    }

    .compotent-goods-list-1-image {
        width: 100%;
        height: 172px;
        border-radius: 10px 10px 0px 0px;
        overflow: hidden;
    }

    .compotent-goods-list-1-message {
        padding: 0 8px 12px;
        line-height: 1;
        position: relative;
    }

    .compotent-goods-list-1-groupon .compotent-goods-list-1-message {
        background-color: linear-gradient(0deg, #FFC39B 0%, #FFFFFF 100%);
    }

    .compotent-goods-list-1-groupon .compotent-goods-list-1-message {
        background-color: linear-gradient(0deg, #FFC39B 0%, #FFFFFF 100%);
    }

    .compotent-goods-list-1-title {
        margin-top: 8px;
        font-size: 13px;
        font-weight: bold;
        color: #333333;
    }

    .compotent-goods-list-1-subtitle {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        margin-top: 10px;
    }

    .compotent-discounts-tags {
        padding: 2px 0px;
        border: 1px solid #FF0000;
        color: #FF0000;
        border-radius: 4px;
        position: relative;
        margin-right: 4px;
        display: inline-block;
        margin-top: 8px;
        line-height: 1;
    }

    .compotent-discounts-tags span {
        transform: scale(0.83);
        font-size: 10px;
        display: inline-block;
    }

    .compotent-discounts-tags:last-child {
        margin-right: 0px;
    }

    /* .compotent-discounts-tags::before {
        position: absolute;
        content: '';
        width: 7px;
        height: 7px;
        border-right: 1px solid #f00;
        border-radius: 50%;
        z-index: 0;
        top: 6px;
        left: -5px;
        background: #fff;
    }

    .compotent-discounts-tags::after {
        position: absolute;
        content: '';
        width: 7px;
        height: 7px;
        border-left: 1px solid #f00;
        border-radius: 50%;
        z-index: 0;
        top: 6px;
        right: -5px;
        background: #fff;
    } */

    .compotent-goods-list-1-price {
        font-size: 14px;
        font-weight: 500;
        color: #FF3000;
        margin-top: 12px;
    }

    .compotent-goods-list-1-sales {
        font-size: 12px;
        transform: scale(0.83);
        display: inline-block;
        font-weight: 500;
        text-decoration: line-through;
        color: #C4C4C4;
        margin-top: 9px;
        margin-left: -2px;
    }

    .compotent-goods-list {
        width: 100%;
        height: 130px;
        background: #FFFFFF;
        box-shadow: 0px 7px 8px 1px rgba(254, 76, 29, 0.05);
        border-radius: 10px;
        margin-bottom: 7px;
        display: flex;
        align-items: center;
        padding: 10px;
    }

    .compotent-goods-list-image {
        width: 110px;
        height: 110px;
        border-radius: 5px;
        margin-right: 10px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
    }

    .compotent-goods-list-image-label {
        position: absolute;
        top: 5px;
        left: 0;
        width: 42px;
        height: 18px;
        line-height: 18px;
        background: linear-gradient(132deg, #FF995D, #FF6361);
        border-radius: 0px 9px 9px 0px;
        padding-left: 3px;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
    }

    .compotent-goods-list-right {
        flex: 1;
        text-align: left;
    }

    .compotent-goods-list-title {
        /* width: 180px; */
        line-height: 18px;
        font-size: 14px;
        font-weight: 600;
        color: #000;
        margin: 3px 0 10px 0;
    }

    .compotent-goods-list-title-tags {
        width: 30px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 2px;
        font-weight: 500;
        color: #FFFFFF;
        margin-right: 4px;
        display: inline-block;
    }

    .compotent-goods-list-title-tags span {
        display: inline-block;
        font-size: 12px;
        transform: scale(0.83);
    }

    .compotent-goods-list-title-tags.compotent-seckill-title-tags {
        background: linear-gradient(90deg, #FF5854 0%, #FF2621 100%);
    }

    .compotent-goods-list-title-tags.compotent-groupon-title-tags {
        background: linear-gradient(90deg, #FE832A 0%, #FF6600 100%);
    }

    .compotent-goods-list-subtitle {
        line-height: 1;
        font-size: 12px;
        font-weight: 500;
        color: #666;
        margin-bottom: 10px;
    }

    .compotent-goods-list-team {
        display: flex;
        align-items: center;
    }

    .compotent-goods-list-team .compotent-goods-list-fire {
        width: 10px;
        height: 12px;
        margin-right: 6px;
    }

    .compotent-goods-list-teamed {
        width: fit-content;
        height: 16px;
        line-height: 16px;
        background: #F9EFD6;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        color: #FF6904;
        transform: scale(0.83);
        padding: 0 10px 0 5px;
        margin-left: -5px;
        display: flex;
        align-items: center;
    }

    .compotent-goods-list-team_num {
        line-height: 1;
        font-size: 10px;
        font-weight: 500;
        color: #999999;
        transform: scale(0.83);
    }

    .compotent-goods-list-message {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .compotent-goods-list-price-container {
        display: flex;
        align-items: flex-end;
    }

    .compotent-goods-list-price {
        line-height: 1;
        font-size: 14px;
        font-weight: 500;
        color: #f00;
        margin-right: 10px;
    }

    .compotent-goods-list-originalprice {
        font-size: 12px;
        font-weight: 400;
        text-decoration: line-through;
        color: #C4C4C4;
        line-height: 1;
    }

    .compotent-goods-list-button {
        width: 60px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        background: linear-gradient(90deg, #E9B461, #EECC89);
        border-radius: 15px;
        font-size: 12px;
        font-weight: 500;
        color: #FFFFFF;
    }

    .compotent-goods-list-button-seckill {
        background: linear-gradient(90deg, #D01325, #ED3C30);
    }

    .compotent-goods-list-button-groupon {
        background: linear-gradient(90deg, #FF6600 0%, #FE832A 100%);
    }

    .compotent-activity-header {
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        color: #333333;
        background-size: 265px 30px;
        background-repeat: no-repeat;
        background-position: left top;
    }

    .compotent-activity-seckill .compotent-activity-header {
        background-image: url('/assets/addons/shopro/img/decorate/seckill-title.png');
    }

    .compotent-activity-groupon .compotent-activity-header {
        background-image: url('/assets/addons/shopro/img/decorate/groupon-title.png');
    }

    .compotent-activity-header-title {
        font-weight: 600;
        font-size: 16px;
    }

    .compotent-activity-header-more {
        font-weight: 600;
        font-size: 12px;
    }

    .compotent-activity-header-more-icon {
        font-size: 12px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        background: #333;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        margin-left: 5px;
    }

    .compotent-activity-container {
        display: flex;
        padding-left: 12px;
        overflow: hidden;
        padding-bottom: 6px;
    }

    .compotent-activity-item {
        text-align: left;
        width: 110px;
        margin-right: 7px;
        border-radius: 5px;
        background-size: 110px 77px;
        background-repeat: no-repeat;
        background-position: left bottom;
        background-color: #fff;
    }

    .compotent-activity-seckill .compotent-activity-item {
        box-shadow: 0px 3px 4px 0px rgba(255, 80, 94, 0.32);
        background-image: url('/assets/addons/shopro/img/decorate/seckill-card1.png');
    }

    .compotent-activity-groupon .compotent-activity-item {
        box-shadow: 0px 3px 4px 1px rgb(162 117 27 / 24%);
        background-image: url('/assets/addons/shopro/img/decorate/groupon-card1.png');
    }

    .compotent-activity-item-image {
        width: 110px;
        height: 104px;
        border-radius: 5px 5px 0px 0px;
        overflow: hidden;
    }

    .compotent-activity-item-message {
        padding: 0 9px;
        padding-top: 8px;
        line-height: 1;
    }

    .compotent-activity-item-title {
        font-size: 13px;
        color: #000000;
        margin-bottom: 10px;
    }

    .compotent-activity-item-price {
        font-size: 14px;
        color: #FF0000;
        margin-bottom: 8px;
    }

    .compotent-activity-item-originalprice {
        color: #C4C4C4;
        margin-bottom: 14px;
    }

    .compotent-activity-item-originalprice span {
        font-size: 12px;
        display: inline-block;
        transform: scale(0.83);
        text-decoration: line-through;
    }

    .compotent-activity-item-pin {
        color: #E9B461;
        margin-bottom: 14px;
    }

    .compotent-activity-item-pin span {
        font-size: 12px;
        display: inline-block;
        transform: scale(0.83);
    }

    .compotent-activity-seckill {
        background: linear-gradient(180deg, #FFEBEC 0%, #FFFFFF 100%);
    }

    .compotent-activity-groupon {
        background: linear-gradient(180deg, #FAECCA 0%, #FFFFFF 100%);
    }

    .compotent-goods-list-2-groupon {
        background-image: url('/assets/addons/shopro/img/decorate/groupon-card2.png');
        background-size: 355px 130px;
        background-repeat: no-repeat;
        background-position: left bottom;
    }

    .compotent-goods-list-2-seckill {
        background-image: url('/assets/addons/shopro/img/decorate/seckill-card2.png');
        background-size: 355px 130px;
        background-repeat: no-repeat;
        background-position: left bottom;
    }

    .el-progress__text {
        display: none;
    }

    .compotent-category-tabs {
        overflow: hidden;
    }

    .compotent-category-tabs-item {
        padding: 10px 12px 15px;
        color: #333;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .compotent-category-tabs-dis {
        margin-top: 5px;
        padding: 0 5px;
        height: 16px;
        border-radius: 8px;
        line-height: 16px;
    }

    .compotent-category-tabs-dis span {
        display: inline-block;
        font-size: 12px;
        transform: scale(0.83);
    }

    .compotent-coupons2-container {
        padding: 0 12px;
    }

    .compotent-coupons2-item {
        width: calc(50% - 4px);
        height: 84px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* background-image: url('/assets/addons/shopro/img/decorate/coupon_bg2.png'); */
        /* background-position: left center;
        background-size: 171px 84px;
        background-repeat: no-repeat; */
        -webkit-mask: url('/assets/addons/shopro/img/decorate/coupon_bg2.png') no-repeat;
        mask: url('/assets/addons/shopro/img/decorate/coupon_bg2.png') no-repeat;
        -webkit-mask-size: 171px 84px;
        mask-size: 171px 84px;

        padding: 0 10px 0 20px;
        text-align: left;
        margin-right: 8px;
        position: relative;
    }

    .compotent-coupons2-item:last-child {
        margin-right: 0;
    }

    .compotent-coupons2-item-left .coupons-amount {
        font-size: 16px;
    }

    .compotent-coupons2-item-left .coupons-enough {
        font-size: 11px;
    }

    .compotent-coupons2-item-left .coupons-stock {
        margin: 0;
        font-size: 11px;
    }

    .compotent-coupons2-item-right {
        writing-mode: tb-rl;
        font-size: 12px;
    }

    .compotent-nodata-tip {
        height: 100px;
        line-height: 100px;
    }

    .compotent-goods-list-1-cart {
        width: 27px;
        height: 27px;
        background: linear-gradient(90deg, #E9B461, #EECC89);
        border-radius: 50%;
        position: absolute;
        bottom: 10px;
        right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .compotent-goods-list-1-cart img {
        width: 15px;
        height: 14px;
    }

    .compotent-banner {
        background: rgba(238, 238, 238, 1);
    }

    .compotent-adv .compotent-adv-image {
        background: #fff;
        overflow: hidden;
        border-radius: 5px;
    }

    .el-slider__bar {
        background-color: #804ED1;
    }

    .el-slider__button {
        border-color: #804ED1;
    }

    .delete-compotent {
        margin-left: 40px;
        color: #f66161;
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
        font-size: 16px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        z-index: 1000;
        padding: 3px 3px 0 0
    }

    .custom-name {
        height: 44px;
        line-height: 44px;
        background: #fff;
        text-align: center;
    }

    .compotent-empty {
        position: absolute;
        top: 62px;
        height: calc(100% - 62px);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .compotent-empty img {
        width: 69px;
        height: 63px;
    }

    .el-color-dropdown__value {
        width: 100px;
    }

    .tabber-popper {
        width: 152px !important;
    }

    .tabber-popper-icon {
        float: right;
        font-size: 18px;
        color: #ccc;
        margin-top: 8px;
        margin-right: 20px;
    }

    .draggable-handle-move {
        margin-right: 20px;
        width: 16px;
        height: 16px;
        cursor: move;
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/color-thief.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/html2canvas.js"></script>
<div id="decorateApp" v-cloak style="height: calc(100vh - 63px);" v-loading="saveLoading">
    <div class="decorate-title">
        <div class="title-msg">
            店铺装修
        </div>
        <div class="title-btn">
            <div class="btn-common title-btn-2" @click="goPreview()">预览</div>
            <div class="btn-common title-btn-3" @click="goPreserve()">保 存</div>
        </div>
    </div>
    <div class="decorate-body">
        <div class="decorate-left" v-if="isPageType=='home'|| isPageType=='user' || fromtype=='custom'">
            <!-- 自定义  home user toolsBox-->
            <div v-if="checkToolsShow(item.show)" v-for="item in toolsBox" :key="item.id">
                <div class="left-menu-title">
                    <span>{{item.name}}</span>
                </div>
                <draggable class="left-menu-container" :list="item.data" v-bind="$attrs" :options="menuOption"
                    :move="menuMove" @start="menuStart" @end="menuEnd">
                    <div v-if="checkToolsShow(ite.show)" v-for="(ite,idx) in item.data" class="left-menu-container-item"
                        :class="ite.type" @click.stop="selectTools(ite.type)">
                        <img :src="ite.image">
                        <div class="menu-item-tip">{{ite.name}}</div>
                    </div>
                </draggable>
            </div>
        </div>
        <div class="center-body">
            <div id="html2canvasWrap" v-if="isPageType!='tabbar' && isPageType!='popup'&& isPageType!='float-button'"
                class="item decorate-center-container decorate-center-container-scrollbar">
                <div v-if="isPageType=='home'" style="position: absolute;z-index: 100;">
                    <img src="/assets/addons/shopro/img/decorate/tabs-header.png">
                    <div v-if="fromtype=='custom'" class="custom-name">{{customName}}</div>
                </div>
                <div v-if="fromtype=='custom'" style="position: relative;z-index: 100;">
                    <img src="/assets/addons/shopro/img/decorate/tabs-header.png">
                    <div v-if="fromtype=='custom'" class="custom-name">{{customName}}</div>
                </div>
                <div v-if="templateData && templateData.length==0" class="compotent-empty">
                    <img src="/assets/addons/shopro/img/decorate/zujian.png">
                </div>
                <draggable :list="templateData" :class="(isPageType=='home' || fromtype=='custom')?'home-custom':''"
                    v-bind="$attrs" class="center-draggable" :options="defaultOption" :move="centerMove"
                    @end="centerEnd">
                    <template v-if="templateData && templateData.length>0">
                        <div class="compotent-item" v-for="(compotent,index) in templateData"
                            @click.stop="compotentShowForm(index)">
                            <div class="seat-item">
                                可放在此处
                            </div>
                            <div class="compotent-item-container">
                                <!-- search -->
                                <div class="compotent-item-container-item compotent-item-container-item-padding"
                                    :class="index==centerSelect?'selected':''" v-if="compotent.type=='search'">
                                    <div class="compotent-search">
                                        <i class="el-icon-search"></i>
                                        <span>{{compotent.content}}</span>
                                    </div>
                                </div>
                                <!-- banner -->
                                <div v-if="compotent.type=='banner' && compotent.content"
                                    class="compotent-banner compotent-item-container-item-margin"
                                    :class="[index==centerSelect?'selected':'',(index==0 && fromtype == 'shop')?'undraggable':'']"
                                    :style="{background:centerSelect==0?'rgba(238,238,238,1)':'#f6f6f6'}">
                                    <div v-if="index==0 && fromtype=='shop'" class="header-name display-flex"
                                        style="justify-content: space-between;">
                                        <span>{{shoproName}}</span>
                                        <div class="header-input">
                                            <i class="el-icon-search"></i>
                                        </div>
                                    </div>
                                    <el-carousel trigger="click" :height="compotent.content.height*0.5+'px'"
                                        :autoplay="false">
                                        <el-carousel-item v-for="(it,index) in compotent.content.list" :key="it">
                                            <div
                                                :style="{height: compotent.content.height*0.5+'px',overflow: 'hidden',padding:compotent.content.y*0.5+'px '+compotent.content.x*0.5+'px'}">
                                                <el-image :style="{'border-radius':compotent.content.radius*0.5+'px'}"
                                                    v-if="it.image" class="label-auto" :src="Fast.api.cdnurl(it.image)"
                                                    fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </el-carousel-item>
                                    </el-carousel>
                                </div>
                                <!-- adv -->
                                <div class="compotent-adv compotent-item-container-item-margin"
                                    :class="index==centerSelect?'selected':''"
                                    v-if="compotent.type=='adv' && compotent.content">
                                    <!-- 1 -->
                                    <div v-if="compotent.content.style==1" class="compotent-adv-1 compotent-adv-image">
                                        <el-image v-if="compotent.content.list[0].image"
                                            :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                    </div>
                                    <!-- 2 -->
                                    <div v-if="compotent.content.style==2" class="compotent-adv-2">
                                        <div class="adv-width-50 adv-height-100 compotent-adv-image"
                                            v-for="it in compotent.content.list">
                                            <el-image v-if="it.image" :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </div>
                                    <!-- 3 -->
                                    <div v-if="compotent.content.style==3" class="compotent-adv-3">
                                        <div class="adv-width-50 adv-height-100 adv-line-right compotent-adv-image">
                                            <el-image v-if="compotent.content.list[0].image"
                                                :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div class="adv-width-50 adv-height-100">
                                            <div
                                                class="adv-width-100 adv-height-50 adv-line-bottom compotent-adv-image">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-100 adv-height-50 compotent-adv-image">
                                                <el-image v-if="compotent.content.list[2].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 4 -->
                                    <div v-if="compotent.content.style==4" class="compotent-adv-4">
                                        <div class="adv-width-50 adv-height-100 adv-line-right">
                                            <div
                                                class="adv-width-100 adv-height-50 adv-line-bottom compotent-adv-image">
                                                <el-image v-if="compotent.content.list[0].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-100 adv-height-50 compotent-adv-image">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                        <div class="adv-width-50 adv-height-100 compotent-adv-image">
                                            <el-image v-if="compotent.content.list[2].image"
                                                :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </div>
                                    <!-- 5 -->
                                    <div v-if="compotent.content.style==5" class="compotent-adv-5">
                                        <div class="adv-width-100 adv-height-50 adv-line-bottom display-flex">
                                            <div class="adv-width-50 adv-height-100 adv-line-right compotent-adv-image">
                                                <el-image v-if="compotent.content.list[0].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-50 adv-height-100 compotent-adv-image">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                        <div class="adv-width-100 adv-height-50 compotent-adv-image">
                                            <el-image v-if="compotent.content.list[2].image"
                                                :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </div>
                                    <!-- 6 -->
                                    <div v-if="compotent.content.style==6" class="compotent-adv-6">
                                        <div class="adv-width-100 adv-height-50 adv-line-bottom compotent-adv-image">
                                            <el-image v-if="compotent.content.list[0].image"
                                                :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div class="adv-width-100 adv-height-50 display-flex">
                                            <div class="adv-width-50 adv-height-100 adv-line-right compotent-adv-image">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-50 adv-height-100 compotent-adv-image">
                                                <el-image v-if="compotent.content.list[2].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 7 -->
                                    <div v-if="compotent.content.style==7" class="compotent-adv-7">
                                        <div class="adv-width-100 adv-height-50 adv-line-bottom display-flex">
                                            <div class="adv-width-50 adv-height-100 adv-line-right compotent-adv-image">
                                                <el-image v-if="compotent.content.list[0].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-50 adv-height-100 compotent-adv-image">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                        <div class="adv-width-100 adv-height-50 display-flex">
                                            <div class="adv-width-33 adv-height-100 adv-line-right compotent-adv-image">
                                                <el-image v-if="compotent.content.list[2].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-33 adv-height-100 adv-line-right compotent-adv-image">
                                                <el-image v-if="compotent.content.list[3].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[3].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-33 adv-height-100 compotent-adv-image">
                                                <el-image v-if="compotent.content.list[4].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[4].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 列表导航nav-list -->
                                <div class="compotent-item-container-item" :class="index==centerSelect?'selected':''"
                                    v-if="compotent.type=='nav-list' && compotent.content">
                                    <div class="compotent-nav-list-item" v-for="it in compotent.content.list">
                                        <div class="compotent-nav-list-item-left">
                                            <img v-if="it.image" class="compotent-nav-list-item-image"
                                                :src="Fast.api.cdnurl(it.image)" />
                                            <div v-if="it.name">{{it.name}}</div>
                                        </div>
                                        <div><i class="el-icon-arrow-right"></i></div>
                                    </div>
                                </div>
                                <!-- 宫格列表 grid-list -->
                                <div class="compotent-item-container-item" :class="index==centerSelect?'selected':''"
                                    v-if="compotent.type=='grid-list' && compotent.content">
                                    <div class="compotent-grid-list-container">
                                        <div class="compotent-grid-list-item" v-for="it in compotent.content.list"
                                            style="height: 62px;">
                                            <div class="compotent-grid-list-item-image"
                                                style="width: 22px;height: 22px;margin-bottom: 8px;">
                                                <img v-if="it.image" :src="Fast.api.cdnurl(it.image)" />
                                            </div>
                                            <div class="compotent-grid-list-item-tip">{{it.name}}</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 富文本 -->
                                <div class="compotent-item-container-item compotent-item-container-item-padding"
                                    :class="index==centerSelect?'selected':''"
                                    v-if="compotent.type=='rich-text' && compotent.content">
                                    <div class="compotent-rich-text" v-if="compotent.content.name">
                                        <div v-html="compotent.content.timeData"></div>
                                    </div>
                                    <el-image v-if="!compotent.content.name"
                                        src="/assets/addons/shopro/img/decorate/rich-text_bg.png" fit="contain">
                                    </el-image>
                                </div>
                                <!-- 订单卡片 -->
                                <div class="compotent-item-container-item compotent-item-container-item-padding"
                                    :class="index==centerSelect?'selected':''" v-if="compotent.type=='order-card'">
                                    <div class="order-card-box">
                                        <img class="label-auto"
                                            src="/assets/addons/shopro/img/decorate/order-card_bg.png">
                                    </div>
                                </div>
                                <!-- 资产卡片 -->
                                <div class="compotent-item-container-item compotent-item-container-item-padding"
                                    :class="index==centerSelect?'selected':''" v-if="compotent.type=='wallet-card'">
                                    <div class="wallet-card-box">
                                        <img class="label-auto"
                                            src="/assets/addons/shopro/img/decorate/wallet-card_bg.png">
                                    </div>
                                </div>
                                <!-- 菜单组 -->
                                <div v-if="compotent.type=='menu' && compotent.content"
                                    class="compotent-item-container-item compotent-item-container-item-margin"
                                    :class="index==centerSelect?'selected':''">
                                    <el-carousel trigger="click"
                                        :height="compotent.content.list.length>compotent.content.style ?'208px':'116px'"
                                        :autoplay="false">
                                        <el-carousel-item
                                            v-for="(it,calindex) in Math.ceil(compotent.content.list.length/(compotent.content.style*2))"
                                            :key="compotent">
                                            <div class="menu-box">
                                                <div class="menu-box-item"
                                                    :style="{width:compotent.content.style==4?'25%':'20%'}"
                                                    v-for="(i,index) in compotent.content.list"
                                                    v-if="(calindex+1)*compotent.content.style*2>=(index+1) && index+1>(calindex)*compotent.content.style*2">
                                                    <div class="compotent-grid-list-item-image menu-compotent-image">
                                                        <img v-if="i.image" class="compotent-grid-list-item-image"
                                                            :src="Fast.api.cdnurl(i.image)" />
                                                    </div>
                                                    <div v-if="i.name" class="compotent-grid-list-item-tip">{{i.name}}
                                                    </div>
                                                </div>
                                            </div>
                                        </el-carousel-item>
                                    </el-carousel>
                                </div>
                                <!-- 优惠券 -->
                                <div class="compotent-item-container-item compotent-item-container-item-margin"
                                    :class="index==centerSelect?'selected':''"
                                    v-if="compotent.type=='coupons' && compotent.content && compotent.content.timeData">
                                    <!-- 有数据 -->
                                    <div class="coupons-container"
                                        v-if="compotent.content.timeData && compotent.content.timeData.length>0">
                                        <div class="compotent-activity-header">
                                            <div class="compotent-activity-header-title">
                                                领劵专区
                                            </div>
                                            <div class="compotent-activity-header-more">
                                                查看更多<i
                                                    class="el-icon-arrow-right compotent-activity-header-more-icon"></i>
                                            </div>
                                        </div>
                                        <template v-if="compotent.content.style==1">
                                            <el-carousel trigger="click" height="84px" :autoplay="false">
                                                <el-carousel-item v-for="it in compotent.content.timeData" :key="it">
                                                    <div class="compotent-coupons1-item"
                                                        :style="{background:(compotent.content.bgcolor1 && compotent.content.bgcolor2)?'linear-gradient(to right,'+compotent.content.bgcolor1 +','+compotent.content.bgcolor2+')':(compotent.content.bgcolor1?compotent.content.bgcolor1:compotent.content.bgcolor2),color:compotent.content.color}">
                                                        <div>
                                                            <div :style="{color:compotent.content.pricecolor}">
                                                                <span>￥</span>
                                                                <span class="coupons-amount">{{it.amount}}</span>
                                                                <span class="coupons-name">{{it.name}}</span>
                                                            </div>
                                                            <div class="coupons-enough">满{{it.enough}}可用</div>
                                                            <div class="coupons-time">
                                                                有效期：{{moment(it.usetimestart*1000).format("YYYY.MM.DD")}}至{{moment(it.usetimeend*1000).format("YYYY.MM.DD")}}
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <div class="coupons-get"
                                                                :style="{color:compotent.content.bgcolor1}">立即领取</div>
                                                            <div class="coupons-stock">仅剩{{it.stock}}张</div>
                                                        </div>
                                                    </div>
                                                </el-carousel-item>
                                            </el-carousel>
                                        </template>
                                        <div v-if="compotent.content.style==2"
                                            class="display-flex compotent-coupons2-container">
                                            <div v-if="cindex<2" v-for="(it,cindex) in compotent.content.timeData"
                                                class="compotent-coupons2-item"
                                                :style="{background:(compotent.content.bgcolor1 && compotent.content.bgcolor2)?'linear-gradient(to right,'+compotent.content.bgcolor1 +','+compotent.content.bgcolor2+')':(compotent.content.bgcolor1?compotent.content.bgcolor1:compotent.content.bgcolor2),color:compotent.content.color}">
                                                <div class="compotent-coupons2-item-left">
                                                    <div :style="{color:compotent.content.pricecolor}">
                                                        <span>￥</span>
                                                        <span class="coupons-amount">{{it.amount}}</span>
                                                    </div>
                                                    <div class="coupons-enough">满{{it.enough}}可用</div>
                                                    <div class="coupons-stock">仅剩{{it.stock}}张</div>
                                                </div>
                                                <div class="compotent-coupons2-item-right">
                                                    立即领取
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 无数据 -->
                                    <template v-if="compotent.content.timeData && compotent.content.timeData.length==0">
                                        <el-image v-if="compotent.content.style==1"
                                            src="/assets/addons/shopro/img/decorate/coupons_bg_01.png" fit="contain">
                                        </el-image>
                                        <el-image v-if="compotent.content.style==2"
                                            src="/assets/addons/shopro/img/decorate/coupons_bg_02.png" fit="contain">
                                        </el-image>
                                    </template>
                                </div>
                                <!-- 秒杀 -->
                                <div v-if="compotent.type=='seckill' && compotent.content && compotent.content.timeData"
                                    class=" compotent-item-container-item-margin"
                                    :class="index==centerSelect?'selected':''">
                                    <div v-if="compotent.content.timeData.length>0" class="compotent-activity-seckill">
                                        <div class="compotent-activity-header">
                                            <div class="compotent-activity-header-title">
                                                {{compotent.content.name}}
                                            </div>
                                            <div class="compotent-activity-header-more">
                                                更多抢购
                                                <i class="el-icon-arrow-right compotent-activity-header-more-icon"></i>
                                            </div>
                                        </div>
                                        <div class="compotent-activity-container">
                                            <template v-if="compotent.content.style==1">
                                                <div class="compotent-activity-item"
                                                    v-for="it in compotent.content.timeData">
                                                    <div class="compotent-activity-item-image">
                                                        <el-image v-if="it.image" :src="Fast.api.cdnurl(it.image)"
                                                            fit="cover">
                                                            <div slot="error" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                        </el-image>
                                                    </div>
                                                    <div class="compotent-activity-item-message">
                                                        <div class="compotent-activity-item-title ellipsis-item">
                                                            {{it.title}}
                                                        </div>
                                                        <div class="compotent-activity-item-price">
                                                            ￥{{it.price}}
                                                        </div>
                                                        <div class="compotent-activity-item-originalprice">
                                                            <span>￥{{it.original_price}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-if="compotent.content.style==2">
                                                <div class="compotent-goods-list-container">
                                                    <div class="compotent-goods-list"
                                                        v-for="(sitem,sindex) in compotent.content.timeData">
                                                        <div class="compotent-goods-list-image">
                                                            <el-image :src="Fast.api.cdnurl(sitem.image)" fit="cover">
                                                                <div slot="error" class="image-slot">
                                                                    <i class="el-icon-picture-outline"></i>
                                                                </div>
                                                            </el-image>
                                                        </div>
                                                        <div class="compotent-goods-list-right">
                                                            <div class="compotent-goods-list-title ellipsis-item">
                                                                <div
                                                                    class="compotent-goods-list-title-tags compotent-seckill-title-tags">
                                                                    <span>秒杀</span>
                                                                </div>
                                                                {{sitem.title}}
                                                            </div>
                                                            <div class="compotent-goods-list-subtitle ellipsis-item">
                                                                {{sitem.subtitle}}
                                                            </div>
                                                            <div class="compotent-goods-list-seckill">
                                                                <div class="compotent-goods-list-progress">
                                                                    <el-progress :percentage="20" stroke-width="8"
                                                                        color="#FFBBBB">
                                                                    </el-progress>
                                                                </div>
                                                                <div class="compotent-goods-list-team_num">已售出20件</div>
                                                            </div>
                                                            <div
                                                                class="compotent-goods-list-message onerow-seckill-message">
                                                                <div class="compotent-goods-list-price-container">
                                                                    <div class="compotent-goods-list-price">
                                                                        ￥{{sitem.price}}
                                                                    </div>
                                                                    <div class="compotent-goods-list-originalprice">
                                                                        ￥{{sitem.original_price}}</div>
                                                                </div>
                                                                <div
                                                                    class="compotent-goods-list-button compotent-goods-list-button-seckill">
                                                                    去抢购</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                    <template v-if="compotent.content.timeData && compotent.content.timeData.length==0">
                                        <el-image v-if="compotent.content.style==1"
                                            src="/assets/addons/shopro/img/decorate/secKill_bg_01.png" fit="contain">
                                        </el-image>
                                        <el-image v-if="compotent.content.style==2"
                                            src="/assets/addons/shopro/img/decorate/secKill_bg_02.png" fit="contain">
                                        </el-image>
                                    </template>
                                </div>
                                <!-- 拼团 -->
                                <div v-if="compotent.type=='groupon' && compotent.content && compotent.content.timeData"
                                    class=" compotent-item-container-item-margin"
                                    :class="index==centerSelect?'selected':''">
                                    <div v-if="compotent.content.timeData.length>0" class="compotent-activity-groupon">
                                        <div class="compotent-activity-header">
                                            <div class="compotent-activity-header-title">
                                                {{compotent.content.name}}
                                            </div>
                                            <div class="compotent-activity-header-more">
                                                更多拼团
                                                <i class="el-icon-arrow-right compotent-activity-header-more-icon"></i>
                                            </div>
                                        </div>
                                        <div class="compotent-activity-container">
                                            <template v-if="compotent.content.style==1">
                                                <div class="compotent-activity-item"
                                                    v-for="it in compotent.content.timeData">
                                                    <div class="compotent-activity-item-image">
                                                        <el-image v-if="it.image" :src="Fast.api.cdnurl(it.image)"
                                                            fit="cover">
                                                            <div slot="error" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                        </el-image>
                                                    </div>
                                                    <div class="compotent-activity-item-message">
                                                        <div class="compotent-activity-item-title ellipsis-item">
                                                            {{it.title}}
                                                        </div>
                                                        <div class="compotent-activity-item-price">
                                                            ￥{{it.groupon_price}}
                                                        </div>
                                                        <div class="compotent-activity-item-pin">
                                                            <span>9527人正在拼</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-if="compotent.content.style==2">
                                                <div class="compotent-goods-list-container">
                                                    <div class="compotent-goods-list"
                                                        v-for="gitem in compotent.content.timeData">
                                                        <div class="compotent-goods-list-image">
                                                            <el-image :src="Fast.api.cdnurl(gitem.image)" fit="cover">
                                                                <div slot="error" class="image-slot">
                                                                    <i class="el-icon-picture-outline"></i>
                                                                </div>
                                                            </el-image>
                                                        </div>
                                                        <div class="compotent-goods-list-right">
                                                            <div class="compotent-goods-list-title ellipsis-item">
                                                                <div
                                                                    class="compotent-goods-list-title-tags compotent-groupon-title-tags">
                                                                    <span>拼团</span>
                                                                </div>
                                                                {{gitem.title}}
                                                            </div>
                                                            <div class="compotent-goods-list-subtitle ellipsis-item">
                                                                {{gitem.subtitle}}
                                                            </div>
                                                            <div class="compotent-goods-list-team">
                                                                <div class="compotent-goods-list-teamed">
                                                                    <img class="compotent-goods-list-fire"
                                                                        src="/assets/addons/shopro/img/decorate/groupon_fire.png">
                                                                    已拼{{gitem.sales}}件
                                                                </div>
                                                                <div class="compotent-goods-list-team_num">
                                                                    {{compotent.content.team_num}}人团</div>
                                                            </div>
                                                            <div class="compotent-goods-list-message">
                                                                <div class="compotent-goods-list-price-container">
                                                                    <div class="compotent-goods-list-price">
                                                                        ￥{{gitem.groupon_price}}
                                                                    </div>
                                                                    <div class="compotent-goods-list-originalprice">
                                                                        ￥{{gitem.original_price}}</div>
                                                                </div>
                                                                <div
                                                                    class="compotent-goods-list-button compotent-goods-list-button-groupon">
                                                                    马上拼</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                    <template v-if="compotent.content.timeData && compotent.content.timeData.length==0">
                                        <el-image v-if="compotent.content.style==1"
                                            src="/assets/addons/shopro/img/decorate/groupon_bg_01.png" fit="contain">
                                        </el-image>
                                        <el-image v-if="compotent.content.style==2"
                                            src="/assets/addons/shopro/img/decorate/groupon_bg_02.png" fit="contain">
                                        </el-image>
                                    </template>
                                </div>
                                <!-- 标题栏  component-item-special-->
                                <div v-if="compotent.type=='title-block' && compotent.content"
                                    :class="index==centerSelect?'selected':''">
                                    <div class="compotent-title-block-container">
                                        <div style="height: 42px;">
                                            <img v-if="compotent.content.image"
                                                :src="Fast.api.cdnurl(compotent.content.image)" class="label-auto">
                                        </div>
                                        <div class="compotent-title-block-title"
                                            :style="{'color':compotent.content.color}">
                                            {{compotent.content.name}}
                                        </div>
                                    </div>
                                </div>
                                <!-- 商品分类,自定义商品 -->
                                <div v-if="(compotent.type=='goods-list' || compotent.type=='goods-group') && compotent.content && compotent.content.timeData"
                                    :class="index==centerSelect?'selected':''">
                                    <div v-if="compotent.content.timeData.length>0"
                                        class="compotent-goods-list-1-container">
                                        <template v-if="compotent.content.style==1">
                                            <el-row :gutter="8" type="flex"
                                                style="align-items: stretch;flex-wrap: wrap;">
                                                <el-col :span="12" v-for="it in compotent.content.timeData">
                                                    <div class="compotent-goods-list-1"
                                                        :class="(it.activity_type && it.activity_type.includes('seckill'))?'compotent-goods-list-1-seckill':((it.activity_type && it.activity_type.includes('groupon'))?'compotent-goods-list-1-groupon':'')">
                                                        <div class="compotent-goods-list-1-image">
                                                            <el-image :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                                <div slot="error" class="image-slot">
                                                                    <i class="el-icon-picture-outline"></i>
                                                                </div>
                                                            </el-image>
                                                        </div>
                                                        <div class="compotent-goods-list-1-message">
                                                            <div class="compotent-goods-list-1-title ellipsis-item">
                                                                <div v-if="it.activity_type && it.activity_type.includes('groupon')"
                                                                    class="compotent-goods-list-title-tags compotent-groupon-title-tags">
                                                                    <span>拼团</span>
                                                                </div>
                                                                <div v-if="it.activity_type && it.activity_type.includes('seckill')"
                                                                    class="compotent-goods-list-title-tags compotent-seckill-title-tags">
                                                                    <span>秒杀</span>
                                                                </div>
                                                                {{it.title}}
                                                            </div>
                                                            <div class="compotent-goods-list-1-subtitle ellipsis-item">
                                                                {{it.subtitle}}</div>
                                                            <div class="display-flex" style="flex-wrap: wrap;">
                                                                <div class="compotent-discounts-tags"
                                                                    v-for="t in it.activity_discounts_tags">
                                                                    <span>{{t}}</span>
                                                                </div>
                                                            </div>
                                                            <div class="compotent-goods-list-1-pricecontainer">
                                                                <div class="compotent-goods-list-1-price">
                                                                    ￥{{it.activity_type &&
                                                                    it.activity_type.includes('groupon')?it.groupon_price:it.price}}
                                                                </div>
                                                                <div class="compotent-goods-list-1-sales">
                                                                    ￥{{it.original_price}}</div>
                                                            </div>
                                                            <div class="compotent-goods-list-1-cart">
                                                                <img src="/assets/addons/shopro/img/decorate/cart.png">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </template>
                                        <template v-if="compotent.content.style==2">
                                            <div class="compotent-goods-list-2-container">
                                                <div class="compotent-goods-list"
                                                    :class="gitem.activity_type && gitem.activity_type.includes('groupon')?'compotent-goods-list-2-groupon':gitem.activity_type && gitem.activity_type.includes('seckill')?'compotent-goods-list-2-seckill':''"
                                                    v-for="gitem in compotent.content.timeData">
                                                    <div class="compotent-goods-list-image">
                                                        <el-image :src="Fast.api.cdnurl(gitem.image)" fit="cover">
                                                            <div slot="error" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                        </el-image>
                                                    </div>
                                                    <div class="compotent-goods-list-right">
                                                        <div class="compotent-goods-list-title ellipsis-item">
                                                            <div v-if="gitem.activity_type && gitem.activity_type.includes('groupon')"
                                                                class="compotent-goods-list-title-tags compotent-groupon-title-tags">
                                                                <span>拼团</span>
                                                            </div>
                                                            <div v-if="gitem.activity_type && gitem.activity_type.includes('seckill')"
                                                                class="compotent-goods-list-title-tags compotent-seckill-title-tags">
                                                                <span>秒杀</span>
                                                            </div>
                                                            {{gitem.title}}
                                                        </div>
                                                        <div class="compotent-goods-list-subtitle ellipsis-item">
                                                            {{gitem.subtitle}}
                                                        </div>
                                                        <div class="display-flex"
                                                            style="flex-wrap: wrap;margin-bottom: 8px;">
                                                            <div class="compotent-discounts-tags" style="margin-top: 0;"
                                                                v-for="t in gitem.activity_discounts_tags">
                                                                <span>{{t}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="compotent-goods-list-message">
                                                            <div class="compotent-goods-list-price-container">
                                                                <div>
                                                                    <div class="compotent-goods-list-price">
                                                                        ￥{{gitem.price}}
                                                                    </div>
                                                                    <div style="margin-top: 8px;"
                                                                        class="compotent-goods-list-originalprice">
                                                                        ￥{{gitem.original_price}}</div>
                                                                </div>
                                                            </div>
                                                            <div class="compotent-goods-list-button"
                                                                :class="gitem.activity_type && gitem.activity_type.includes('groupon')?'compotent-goods-list-button-groupon':gitem.activity_type && gitem.activity_type.includes('seckill')?'compotent-goods-list-button-seckill':''">
                                                                {{gitem.activity_type &&
                                                                gitem.activity_type.includes('groupon')?'马上拼':gitem.activity_type
                                                                && gitem.activity_type.includes('seckill')?'去抢购':'去购买'}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                    <template v-if="compotent.content.timeData && compotent.content.timeData.length==0">
                                        <el-image v-if="compotent.content.style==1"
                                            :src="'/assets/addons/shopro/img/decorate/'+compotent.type+'_bg_01.png'"
                                            fit="contain">
                                        </el-image>
                                        <el-image v-if="compotent.content.style==2"
                                            :src="'/assets/addons/shopro/img/decorate/'+compotent.type+'_bg_02.png'"
                                            fit="contain">
                                        </el-image>
                                    </template>
                                </div>
                                <div v-if="compotent.type=='category-tabs' && compotent.content && compotent.content.timeData"
                                    class="undraggable" :class="index==centerSelect?'selected':''">
                                    <div class="compotent-category-tabs display-flex">
                                        <div class="compotent-category-tabs-item"
                                            v-for="(tabs,tindex) in compotent.content.category_arr">
                                            <div :style="{color:tindex==0?'#A8700D':'#333'}">{{tabs.name}}</div>
                                            <div class="compotent-category-tabs-dis"
                                                :style="{color:tindex==0?'#fff':'#999',background:tindex==0?'linear-gradient(90deg, #E9B461, #EECC89)':''}">
                                                <span>{{tabs.description?tabs.description:'暂无'}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="compotent.content.timeData.length>0"
                                        class="compotent-goods-list-1-container">
                                        <template v-if="compotent.content.style==1">
                                            <el-row :gutter="8" type="flex"
                                                style="align-items: stretch;flex-wrap: wrap;">
                                                <el-col :span="12" v-for="it in compotent.content.timeData">
                                                    <div class="compotent-goods-list-1"
                                                        :class="(it.activity_type && it.activity_type.includes('seckill'))?'compotent-goods-list-1-seckill':((it.activity_type && it.activity_type.includes('groupon'))?'compotent-goods-list-1-groupon':'')">
                                                        <div class="compotent-goods-list-1-image">
                                                            <el-image :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                                <div slot="error" class="image-slot">
                                                                    <i class="el-icon-picture-outline"></i>
                                                                </div>
                                                            </el-image>
                                                        </div>
                                                        <div class="compotent-goods-list-1-message">
                                                            <div class="compotent-goods-list-1-title ellipsis-item">
                                                                <div v-if="it.activity_type && it.activity_type.includes('groupon')"
                                                                    class="compotent-goods-list-title-tags compotent-groupon-title-tags">
                                                                    <span>拼团</span>
                                                                </div>
                                                                <div v-if="it.activity_type && it.activity_type.includes('seckill')"
                                                                    class="compotent-goods-list-title-tags compotent-seckill-title-tags">
                                                                    <span>秒杀</span>
                                                                </div>
                                                                {{it.title}}
                                                            </div>
                                                            <div class="compotent-goods-list-1-subtitle ellipsis-item">
                                                                {{it.subtitle}}</div>
                                                            <div class="display-flex" style="flex-wrap: wrap;">
                                                                <div class="compotent-discounts-tags"
                                                                    v-for="t in it.activity_discounts_tags">
                                                                    <span>{{t}}</span>
                                                                </div>
                                                            </div>
                                                            <div class="compotent-goods-list-1-pricecontainer">
                                                                <div class="compotent-goods-list-1-price">
                                                                    ￥{{it.activity_type &&
                                                                    it.activity_type.includes('groupon')?it.groupon_price:it.price}}
                                                                </div>
                                                                <div class="compotent-goods-list-1-sales">
                                                                    ￥{{it.original_price}}</div>
                                                            </div>
                                                            <div class="compotent-goods-list-1-cart">
                                                                <img src="/assets/addons/shopro/img/decorate/cart.png">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </template>
                                        <template v-if="compotent.content.style==2">
                                            <div class="compotent-goods-list-2-container">
                                                <div class="compotent-goods-list"
                                                    :class="gitem.activity_type && gitem.activity_type.includes('groupon')?'compotent-goods-list-2-groupon':gitem.activity_type && gitem.activity_type.includes('seckill')?'compotent-goods-list-2-seckill':''"
                                                    v-for="gitem in compotent.content.timeData">
                                                    <div class="compotent-goods-list-image">
                                                        <el-image :src="Fast.api.cdnurl(gitem.image)" fit="cover">
                                                            <div slot="error" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                        </el-image>
                                                    </div>
                                                    <div class="compotent-goods-list-right">
                                                        <div class="compotent-goods-list-title ellipsis-item">
                                                            <div v-if="gitem.activity_type && gitem.activity_type.includes('groupon')"
                                                                class="compotent-goods-list-title-tags compotent-groupon-title-tags">
                                                                <span>拼团</span>
                                                            </div>
                                                            <div v-if="gitem.activity_type && gitem.activity_type.includes('seckill')"
                                                                class="compotent-goods-list-title-tags compotent-seckill-title-tags">
                                                                <span>秒杀</span>
                                                            </div>
                                                            {{gitem.title}}
                                                        </div>
                                                        <div class="compotent-goods-list-subtitle ellipsis-item">
                                                            {{gitem.subtitle}}
                                                        </div>
                                                        <div class="display-flex"
                                                            style="flex-wrap: wrap;margin-bottom: 8px;">
                                                            <div class="compotent-discounts-tags" style="margin-top: 0;"
                                                                v-for="t in gitem.activity_discounts_tags">
                                                                <span>{{t}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="compotent-goods-list-message">
                                                            <div class="compotent-goods-list-price-container">
                                                                <div>
                                                                    <div class="compotent-goods-list-price">
                                                                        ￥{{gitem.price}}
                                                                    </div>
                                                                    <div style="margin-top: 8px;"
                                                                        class="compotent-goods-list-originalprice">
                                                                        ￥{{gitem.original_price}}</div>
                                                                </div>
                                                            </div>
                                                            <div class="compotent-goods-list-button"
                                                                :class="gitem.activity_type && gitem.activity_type.includes('groupon')?'compotent-goods-list-button-groupon':gitem.activity_type && gitem.activity_type.includes('seckill')?'compotent-goods-list-button-seckill':''">
                                                                {{gitem.activity_type &&
                                                                gitem.activity_type.includes('groupon')?'马上拼':gitem.activity_type
                                                                && gitem.activity_type.includes('seckill')?'去抢购':'去购买'}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                    <div v-if="compotent.content.timeData && compotent.content.timeData.length==0"
                                        class="compotent-nodata-tip">
                                        <span v-if="compotent.content.category_arr.length==0">请选择分类,生成分类选项卡</span>
                                        <span v-if="compotent.content.category_arr.length>0">选中的分类选项卡没数据</span>
                                    </div>
                                    <div v-if="!compotent.content.timeData">
                                        <span v-if="compotent.content.category_arr.length>0">选中的分类选项卡没数据</span>
                                    </div>
                                </div>
                                <!-- 直播 -->
                                <div class="compotent-item-container-item compotent-item-container-item-padding"
                                    :class="index==centerSelect?'selected':''"
                                    v-if="compotent.type=='live' && compotent.content && compotent.content.timeData">
                                    <div class="live-box"
                                        v-if="compotent.content.timeData && compotent.content.timeData.length>0">
                                        <template>
                                            <div class="activity-header">
                                                <div class="activity-header-tip">
                                                    {{compotent.content.name}}
                                                </div>
                                                <div class="activity-more">更多<i
                                                        class="el-icon-arrow-right activity-more-icon"></i></div>
                                            </div>
                                            <div class="live-body">
                                                <div class="live-item" v-for="(it,idx) in compotent.content.timeData"
                                                    v-if="compotent.content.style>idx"
                                                    :style="{width:compotent.content.style==1?'100%':'50%'}">
                                                    <div style="width: 100%;position: relative;height: 140px;border-radius: 10px;
                                                overflow: hidden;">
                                                        <div
                                                            style="position: absolute;background: rgba(0,0,0,0.3);width:70px;border-radius: 10px;height: 20px;line-height: 20px;top:10px;left: 5px;">
                                                            <i class="el-icon-video-play"></i><span
                                                                style="margin-left: 6px;color:#fff">{{it.live_status_text}}</span>
                                                        </div>
                                                        <img class="label-auto" :src="Fast.api.cdnurl(it.share_img)">
                                                        <div class="live-name"
                                                            style="position: absolute;bottom: 20px;left: 20px;color: #fff;">
                                                            {{it.name}}</div>
                                                    </div>
                                                    <div style="height: 30px;
                                            line-height: 30px;text-align:left;padding:0 10px">
                                                        {{it.anchor_name}}
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                    <el-image v-if="compotent.content.timeData && compotent.content.timeData.length==0"
                                        src="/assets/addons/shopro/img/decorate/live_bg.png" fit="contain">
                                    </el-image>
                                </div>
                                <div class="undraggable" :class="index==centerSelect?'selected':''"
                                    v-if="compotent.type=='user'">
                                    <div style="position: relative;height: 160px;" v-if="compotent.content.style==2">
                                        <img style="position: absolute;left:0"
                                            src="/assets/addons/shopro/img/decorate/user_bg.png">
                                        <img v-if="compotent.content.image"
                                            :src="Fast.api.cdnurl(compotent.content.image)" />
                                    </div>
                                    <img :style="{background:compotent.content.color}"
                                        src="/assets/addons/shopro/img/decorate/user_bg.png"
                                        v-if="compotent.content.style==1">
                                </div>
                                <div v-if="(index==centerSelect && compotent.type!='user' && compotent.type!='banner') || (index==centerSelect && centerSelect!=0 && compotent.type=='banner') || (index==centerSelect && fromtype == 'custom')"
                                    class="delete-compotent">
                                    <i class="el-icon-delete-solid" @click.stop="centerDel(index)"></i>
                                </div>
                            </div>
                        </div>
                    </template>
                </draggable>
            </div>
            <div v-if="isPageType=='tabbar'" class="item decorate-center-container"
                :style="{height:isPageType=='tabbar'?'90%':'100%'}">
                <div class="tabbar-body-item" style="height: 60px;justify-content: center;"
                    :style="{background: templateData[0].content.bgcolor}">
                    <div v-for="(item,index) in templateData[0].content.list" :key="item.id"
                        :style="{width:(100/templateData[0].content.list.length)+'%'}"
                        @click.stop="tabbarSelected(index)">
                        <div style="height: 25px;margin-bottom: 6px;display: flex;justify-content: center;align-items: center;"
                            v-if="templateData[0].content.style!=3">
                            <img v-if="item.image && templateData[0].content.style!=3" style="width: 25px;height: 25px;"
                                :src="item.selected?Fast.api.cdnurl(item.activeImage):Fast.api.cdnurl(item.image)" />
                        </div>
                        <div v-if="templateData[0].content.style==1 || templateData[0].content.style==3"
                            :style="{color:item.selected?templateData[0].content.activeColor:templateData[0].content.color}">
                            {{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="decorate-center-container" id="popupContainer" v-if="isPageType=='popup'">
                <div v-for="(item,index) in templateData" :key="item.id" class="board-item tabbar-body"
                    style="height: 100%;" @click.stop="showForm(index)">
                    <div class="tabbar-body-item" style="height: 100%;background:#999;overflow: hidden;">
                        <div style="position: relative;width: 292px;
                            height: 454px;">
                            <div v-for="(popup,idx) in item.content.list" @click="popupSelect(idx)">
                                <el-image
                                    style="width: 100%;
                                    height: 100%;background: #fff;position: absolute;border: 1px solid #e6e6e6;border-radius: 5px;"
                                    :style="{left:idx*20+'px',top:idx*20+'px','z-index':popupIndex==idx?2000:100}"
                                    :src="Fast.api.cdnurl(popup.image)" fit="contain">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="decorate-center-container" id="float-button-box"
                style="position: relative;height: calc(100vh - 230px);overflow: hidden;"
                v-if="isPageType=='float-button'">
                <div id="float-button" style="display: flex;flex-direction: column;align-items: flex-end;">
                    <div style="display: flex;flex-direction: column;align-items: flex-end;">
                        <el-image v-for="(float,idx) in templateData[0].content.list" style="width: 30px;
                            height: 30px;border-radius: 15px;margin-bottom: 10px;"
                            :src="Fast.api.cdnurl(float.btnimage)" fit="contain">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <div @click.stop="isfloat = !isfloat">
                        <el-image style="width: 30px;height: 30px;border-radius: 15px;"
                            :src="Fast.api.cdnurl(templateData[0].content.image)" fit="contain">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                </div>
            </div>
            <div class="decorate-body-buttom" v-if="fromtype=='shop'">
                <div v-for="(item,index) in pageTypeList" class="btn-common decorate-body-buttom-item"
                    :class="item.flag?'decorate-body-buttom-item-active':''" @click="selectType(item.type,index)">
                    {{item.name}}
                </div>
            </div>
        </div>
        <div class="right-container">
            <div class="decorate-right decorate-center-container-scrollbar" v-if="centerSelect!=null">
                <div class="decorate-right-header">
                    <img v-if="templateForm.type=='search'" src="/assets/addons/shopro/img/decorate/search.png" />
                    <img v-if="templateForm.type=='banner'" src="/assets/addons/shopro/img/decorate/banner.png" />
                    <img v-if="templateForm.type=='menu'" src="/assets/addons/shopro/img/decorate/menu.png" />
                    <img v-if="templateForm.type=='adv'" src="/assets/addons/shopro/img/decorate/adv.png" />
                    <img v-if="templateForm.type=='title-block'"
                        src="/assets/addons/shopro/img/decorate/title-block.png" />
                    <img v-if="templateForm.type=='grid-list'" src="/assets/addons/shopro/img/decorate/grid-list.png" />
                    <img v-if="templateForm.type=='nav-list'" src="/assets/addons/shopro/img/decorate/nav-list.png" />
                    <img v-if="templateForm.type=='goods-group'"
                        src="/assets/addons/shopro/img/decorate/goods-group.png" />
                    <img v-if="templateForm.type=='category-tabs'"
                        src="/assets/addons/shopro/img/decorate/category_tabs.png" />
                    <img v-if="templateForm.type=='goods-list'"
                        src="/assets/addons/shopro/img/decorate/goods-list.png" />
                    <img v-if="templateForm.type=='coupons'" src="/assets/addons/shopro/img/decorate/coupon.png" />
                    <img v-if="templateForm.type=='groupon'" src="/assets/addons/shopro/img/decorate/groupon.png" />
                    <img v-if="templateForm.type=='seckill'" src="/assets/addons/shopro/img/decorate/secKill.png" />
                    <img v-if="templateForm.type=='live'" src="/assets/addons/shopro/img/decorate/live.png" />
                    <img v-if="templateForm.type=='rich-text'" src="/assets/addons/shopro/img/decorate/rich-text.png" />
                    <img v-if="templateForm.type=='user'" src="/assets/addons/shopro/img/decorate/user.png" />
                    <img v-if="templateForm.type=='nav-bg'" src="/assets/addons/shopro/img/decorate/tabbar.png" />
                    <img v-if="templateForm.type=='popup'" src="/assets/addons/shopro/img/decorate/popup.png" />
                    <img v-if="templateForm.type=='tabbar'" src="/assets/addons/shopro/img/decorate/tabbar.png" />
                    <img v-if="templateForm.type=='float-button'"
                        src="/assets/addons/shopro/img/decorate/float-button.png" />
                    <span v-if="templateForm.type!='order-card' && templateForm.type!='wallet-card'"
                        class="decorate-right-header-title">
                        {{templateForm.name}}
                    </span>
                    <el-popover popper-class="tabber-popper" placement="bottom-start" width="200" trigger="hover">
                        <el-link type="primary" href="https://doc.fastadmin.net/shopro/825.html" target="_blank">
                            自定义底部导航文档
                        </el-link>
                        <i v-if="templateForm.type=='tabbar'" slot="reference"
                            class="el-icon-question tabber-popper-icon"></i>
                    </el-popover>
                </div>
                <!-- 轮播图 -->
                <div v-if="templateForm.type=='banner'" class="decorate-right-write">
                    <div v-if="centerSelect!=0 || fromtype=='custom'">
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    高度
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <el-slider :min="100" :max="600" v-model="templateForm.content.height"></el-slider>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    倒角度数
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <el-slider :min="0" :max="50" v-model="templateForm.content.radius"></el-slider>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    左右边距
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <el-slider v-model="templateForm.content.x"></el-slider>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    上下边距
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <el-slider v-model="templateForm.content.y"></el-slider>
                            </el-col>
                        </el-row>
                    </div>
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:100}"
                        handle=".draggable-handle-move">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="display-flex" style="align-items: center;">
                                        <img class="draggable-handle-move"
                                            src="/assets/addons/shopro/img/decorate/move.png">
                                        <div class="select-style-item-tip">
                                            图片{{index+1}}
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <span @click.stop="rightDel(index)">删除</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select input-select-inline">
                                        <img class="select-img image-border" :class="'bannerimg'+index"
                                            :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/shopro/img/decorate/image-default.png'">
                                        <div class="btn-common margin-left-20 " @click="choosePicture('banner',index)">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    建议尺寸:750*520
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink('banner',index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                            <el-radio :label="2">外部链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        背景颜色
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select input-select-inline">
                                        <el-input v-model="item.bgcolor" size="mini"></el-input>
                                        <el-color-picker v-model="item.bgcolor" size="mini"></el-color-picker>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('banner')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
                <!-- 菜单组 -->
                <div v-if="templateForm.type=='menu'" class="decorate-right-write">
                    <el-row class="select-style-item-box" style="margin: 0 0 16px;">
                        <el-col :xs="6" :sm="6">
                            <div class="select-style-item-tip radio-tip">
                                样式选择
                            </div>
                        </el-col>
                        <el-col :xs="16" :sm="16">
                            <div class="select-style-item-select">
                                <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                    <el-radio :label="4">4列</el-radio>
                                    <el-radio :label="5">5列</el-radio>
                                </el-radio-group>
                            </div>
                        </el-col>
                    </el-row>
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:200}"
                        handle=".draggable-handle-move">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="display-flex" style="align-items: center;">
                                        <img class="draggable-handle-move"
                                            src="/assets/addons/shopro/img/decorate/move.png">
                                        <div class="select-style-item-tip">
                                            图片{{index+1}}
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <span @click.stop="rightDel(index)">删除</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        菜单标题
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-input placeholder="最多4个文字" size="mini" v-model="item.name" maxlength="5">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img select-imgzheng image-border"
                                            :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/shopro/img/decorate/image-default2.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    建议尺寸:98x98
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink('menu',index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                            <el-radio :label="2">外部链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('menu')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
                <!-- 广告魔方 -->
                <div v-if="templateForm.type=='adv'" class="decorate-right-write">
                    <div class="select-style-con">
                        <img :src="advStyleImage[templateForm.content.style - 1].src">
                        <div class="chooseAdvPic" @click.stop="chooseAdvPic">
                            选择风格
                        </div>
                    </div>
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:200}"
                        handle=".draggable-handle-move">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <div class="display-flex select-style-item-title" style="align-items: center;">
                                <img class="draggable-handle-move" src="/assets/addons/shopro/img/decorate/move.png">
                                <div class="select-style-item-tip">
                                    图片{{index+1}}:
                                </div>
                            </div>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择图片:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img image-border"
                                            :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/shopro/img/decorate/image-default.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink('adv',index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                            <el-radio :label="2">外部链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </draggable>
                </div>
                <div v-if="templateForm.type=='goods-group'" class="decorate-right-write">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            商品分类
                        </div>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    样式选择
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                        <el-radio :label="1">样式一</el-radio>
                                        <el-radio :label="2">样式二</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    选择分类:
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.category_name" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('goods-group')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 自定义菜单 -->
                <div v-if="templateForm.type=='goods-list'" class="decorate-right-write">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            商品列表
                        </div>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    样式选择
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                        <el-radio :label="1">样式一</el-radio>
                                        <el-radio :label="2">样式二</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    选择商品:
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.ids" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('goods-list')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <div style="display: flex;flex-wrap: wrap;padding-left: 15px;padding-top: 16px;"
                            v-if="templateData[centerSelect].content.timeData">
                            <draggable style="display: flex;flex-wrap: wrap;"
                                :list="templateData[centerSelect].content.timeData" v-bind="$attrs"
                                :options="{animation:100}" @end="goodsListEnd">
                                <div style="width: 40px;height: 40px;border-radius: 3px;
                                    margin-bottom: 10px;margin-right: 10px;position: relative;"
                                    v-for="(item,index) in templateData[centerSelect].content.timeData">
                                    <el-image class="image-border" style="width: 100%;height: 100%;"
                                        :src="Fast.api.cdnurl(item.image)" fit="contain">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                    <i style="position: absolute;width: 12px;height: 12px;
                                    right: -6px;top: -6px;color: #7438D5;" class="el-icon-error"
                                        @click="customList(index)"></i>
                                </div>
                            </draggable>
                        </div>
                    </div>
                </div>
                <div v-if="templateForm.type=='coupons'" class="decorate-right-write">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            优惠券
                        </div>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    样式选择
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                        <el-radio :label="1">样式一</el-radio>
                                        <el-radio :label="2">样式二</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    选择优惠券
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.ids" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('coupons')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    背景颜色1
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-input v-model="templateForm.content.bgcolor1" size="mini"></el-input>
                                    <el-color-picker v-model="templateForm.content.bgcolor1" size="mini">
                                    </el-color-picker>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    背景颜色2
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-input v-model="templateForm.content.bgcolor2" size="mini"></el-input>
                                    <el-color-picker v-model="templateForm.content.bgcolor2" size="mini">
                                    </el-color-picker>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    价格颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-input v-model="templateForm.content.pricecolor" size="mini"></el-input>
                                    <el-color-picker v-model="templateForm.content.pricecolor" size="mini">
                                    </el-color-picker>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    字体颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-input v-model="templateForm.content.color" size="mini"></el-input>
                                    <el-color-picker v-model="templateForm.content.color" size="mini"></el-color-picker>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 拼团 -->
                <div v-if="templateForm.type=='groupon'" class="decorate-right-write">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            拼团
                        </div>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    拼团名称
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-input v-model="templateForm.content.name" size="mini"></el-input>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    样式选择
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                        <el-radio :label="1">样式一</el-radio>
                                        <el-radio :label="2">样式二</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    拼团列表
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.groupon_name" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('groupon')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 秒杀 -->
                <div v-if="templateForm.type=='seckill'" class="decorate-right-write">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            秒杀
                        </div>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    秒杀名称
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-input v-model="templateForm.content.name" size="mini"></el-input>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    样式选择
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                        <el-radio :label="1">样式一</el-radio>
                                        <el-radio :label="2">样式二</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    秒杀列表
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.seckill_name" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('seckill')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 直播 -->
                <div v-if="templateForm.type=='live'" class="decorate-right-write">
                    <el-row class="select-style-item-box box-radio">
                        <el-col :xs="6" :sm="6">
                            <div class="select-style-item-tip radio-tip">
                                样式选择
                            </div>
                        </el-col>
                        <el-col :xs="16" :sm="16">
                            <div class="select-style-item-select">
                                <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                    <el-radio :label="1">1列</el-radio>
                                    <el-radio :label="2">2列</el-radio>
                                </el-radio-group>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            直播
                        </div>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    直播名称
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-input v-model="templateForm.content.name" size="mini"></el-input>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    直播列表
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.ids" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('live')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div v-if="templateForm.type=='tabbar'" class="decorate-right-write">
                    <div class="select-style-item">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    样式选择
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    选择样式
                                </div>
                            </el-col>
                            <el-col :xs="18" :sm="18">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                        <el-radio :label="1">图标+文字</el-radio>
                                        <el-radio :label="2">图标</el-radio>
                                        <el-radio :label="3">文字</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:100}"
                        handle=".draggable-handle-move">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="display-flex" style="align-items: center;">
                                        <img class="draggable-handle-move"
                                            src="/assets/addons/shopro/img/decorate/move.png">
                                        <div class="select-style-item-tip">
                                            导航图片{{index+1}}
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <span @click.stop="rightDel(index)">删除</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <div v-if="templateForm.content.style!=3">
                                <el-row class="select-style-item-box">
                                    <el-col :xs="6" :sm="6">
                                        <div class="select-style-item-tip">
                                            默认图片
                                        </div>
                                    </el-col>
                                    <el-col :xs="16" :sm="16">
                                        <div class="select-style-item-select">
                                            <img class="select-img select-imgzheng image-border"
                                                :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/shopro/img/decorate/image-default2.png'">
                                            <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                                {{item.image?'重新选择':'选择图片'}}
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row class="select-style-item-box">
                                    <el-col :xs="6" :sm="6">
                                        <div class="select-style-item-tip">
                                            选中图片
                                        </div>
                                    </el-col>
                                    <el-col :xs="16" :sm="16">
                                        <div class="select-style-item-select">
                                            <img class="select-img select-imgzheng image-border"
                                                :src="item.activeImage?Fast.api.cdnurl(item.activeImage):'/assets/addons/shopro/img/decorate/image-default2.png'">
                                            <div class="btn-common margin-left-20 choosePicture" :data-index="index"
                                                :data-active="'active'">
                                                {{item.activeImage?'重新选择':'选择图片'}}
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                    <el-col :xs="16" :sm="16" :offset="6">
                                        建议尺寸:46x46
                                    </el-col>
                                </el-row>
                            </div>
                            <el-row class="select-style-item-box" v-if="templateForm.content.style!=2">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        图标名称
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-input placeholder="最多4个文字" maxlength="4" size="mini" v-model="item.name">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink('tabbar',index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                            <el-radio :label="2">外部链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="必须填写http(s)://">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip" v-if="templateForm.content.list.length<5">
                        <div @click.stop="addForm('tabbar')" class="btn-common">
                            添加
                        </div>
                    </div>
                    <div class="select-style-item" v-if="templateForm.content.style!=2">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    文字颜色
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    默认颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <p class="select-color">
                                        <el-input placeholder="" size="mini" v-model="templateForm.content.color">
                                        </el-input>
                                        <el-color-picker v-model="templateForm.content.color" size="small">
                                        </el-color-picker>
                                    </p>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    选中颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <p class="select-color">
                                        <el-input placeholder="" size="mini" v-model="templateForm.content.activeColor">
                                        </el-input>
                                        <el-color-picker v-model="templateForm.content.activeColor" size="small">
                                        </el-color-picker>
                                    </p>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="select-style-item">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    背景颜色
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    默认颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <p class="select-color">
                                        <el-input placeholder="" size="mini" v-model="templateForm.content.bgcolor">
                                        </el-input>
                                        <el-color-picker v-model="templateForm.content.bgcolor" size="small">
                                        </el-color-picker>
                                    </p>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 列表导航 -->
                <div v-if="templateForm.type=='nav-list'" class="decorate-right-write">
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:100}"
                        handle=".draggable-handle-move">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="display-flex" style="align-items: center;">
                                        <img class="draggable-handle-move"
                                            src="/assets/addons/shopro/img/decorate/move.png">
                                        <div class="select-style-item-tip">
                                            列表{{index+1}}
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <span @click.stop="rightDel(index)">删除</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img select-imgzheng image-border"
                                            :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/shopro/img/decorate/image-default2.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    建议尺寸:38x38
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        编辑标题
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-input placeholder="最多12个文字" size="mini" v-model="item.name" maxlength="12">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink('nav-list',index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                            <el-radio :label="2">外部链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('nav-list')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
                <!-- 宫格列表 -->
                <div v-if="templateForm.type=='grid-list'" class="decorate-right-write">
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:100}"
                        handle=".draggable-handle-move">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="display-flex" style="align-items: center;">
                                        <img class="draggable-handle-move"
                                            src="/assets/addons/shopro/img/decorate/move.png">
                                        <div class="select-style-item-tip">
                                            列表图片{{index+1}}
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <span @click.stop="rightDel(index)">删除</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img select-imgzheng image-border"
                                            :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/shopro/img/decorate/image-default2.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        编辑标题
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-input placeholder="最多4个文字" size="mini" v-model="item.name" maxlength="4">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink('grid-list',index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                            <el-radio :label="2">外部链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('grid-list')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
                <!-- 富文本 -->
                <div v-if="templateForm.type=='rich-text'" class="decorate-right-write">
                    <div class="select-style-item">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    富文本
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    点击选择:
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <div class="btn-common chooseRichText">
                                        富文本
                                    </div>
                                    <span class="margin-left-20 one-ellipsis">{{templateForm.content.name}}</span>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 标题栏 -->
                <div v-if="templateForm.type=='title-block'" class="decorate-right-write">
                    <div class="select-style-item" :class="templateForm.content.style=='2'?'':'select-style-block'">
                        <el-row class="select-style-item-title">
                            <el-col :xs="24" :sm="24">
                                <div class="select-style-item-tip">
                                    装饰<span style="margin: 10px 0;padding-left: 10px;color: #999;">(建议尺寸:710x84)</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="title-block-body">
                            <div v-if="templateForm.content.style_type">
                                <div class="compotent-title-block-container">
                                    <div class="title-block-title" :style="{color:templateForm.content.color}">
                                        {{templateForm.content.name}}
                                    </div>
                                    <img class="title-block-style"
                                        :src="titleBlock.data[templateForm.content.style_type-1].src"
                                        :style="{margin:0}">
                                </div>
                                <div class="title-block-btn" @click="selectTitleBlock(null)">
                                    选择样式
                                </div>
                            </div>
                            <div v-else>
                                <div v-if="!templateForm.content.image">
                                    <div v-for="(it,idx) in titleBlock.data" class="compotent-title-block-container"
                                        @click="selectTitleBlock(idx)">
                                        <div class="title-block-title" :style="{color:templateForm.content.color}">
                                            {{templateForm.content.name}}
                                        </div>
                                        <img class="title-block-style image-border" :src="Fast.api.cdnurl(it.src)"
                                            :style="{margin:idx==titleBlock.length-1?'0':''}">
                                    </div>
                                </div>
                                <div v-if="templateForm.content.image">
                                    <div class="compotent-title-block-container">
                                        <div class="title-block-title" :style="{color:templateForm.content.color}">
                                            {{templateForm.content.name}}
                                        </div>
                                        <img class="title-block-style image-border"
                                            :src="Fast.api.cdnurl(templateForm.content.image)">
                                    </div>
                                    <div class="title-block-btn" style="justify-content: space-around;display: flex;">
                                        <span @click="selectTitleBlock(null)">选择样式</span><span class="choosePicture"
                                            data-index="title-block">选择图片</span>
                                    </div>
                                </div>
                            </div>
                        </el-row>
                    </div>
                    <div class="select-style-item">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    文字
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    编辑标题
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-input placeholder="最多4个文字" maxlength="4" size="mini"
                                        v-model="templateForm.content.name">
                                    </el-input>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <p class="select-color">
                                        <el-input placeholder="" size="mini" v-model="templateForm.content.color">
                                        </el-input>
                                        <el-color-picker v-model="templateForm.content.color" size="small">
                                        </el-color-picker>
                                    </p>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 导航背景色 -->
                <div v-if="templateForm.type=='nav-bg'" class="decorate-right-write">
                    <div class="select-style-item">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    导航背景色
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    导航背景
                                </div>
                            </el-col>
                            <el-col :xs="18" :sm="18">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                        <el-radio :label="1">色块</el-radio>
                                        <el-radio :label="2">图片</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box" v-if="templateForm.content.style==1">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    修改颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <p class="select-color">
                                        <el-input placeholder="" size="mini" v-model="templateForm.content.color">
                                        </el-input>
                                        <el-color-picker v-model="templateForm.content.color" size="small">
                                        </el-color-picker>
                                    </p>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box" v-if="templateForm.content.style=='2'">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    选择图片
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <img class="select-img image-border"
                                        :src="templateForm.content.image?Fast.api.cdnurl(templateForm.content.image):'/assets/addons/shopro/img/decorate/image-default.png'">
                                    <div class="btn-common margin-left-20 choosePicture" data-index="image">
                                        {{templateForm.content.image?'重新选择':'选择图片'}}
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="templateForm.type=='category-tabs'" class="decorate-right-write">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            分类商品组
                        </div>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip search-tip">
                                    样式选择
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                        <el-radio :label="1">样式一</el-radio>
                                        <el-radio :label="2">样式二</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    选择分类:
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.ids" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('category-tabs')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 弹窗 -->
                <div v-if="templateForm.type=='popup'" class="decorate-right-write">
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:100}">
                        <div class="select-style-item select-style-block"
                            v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="select-style-item-tip">
                                        弹窗设置{{index+1}}
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <span @click.stop="rightDel(index)">删除</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        弹窗图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img image-border"
                                            :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/shopro/img/decorate/image-default.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    建议尺寸:612x836
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink(index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                            <el-radio :label="2">外部链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        显示类型
                                    </div>
                                </el-col>
                                <el-col :xs="18" :sm="18">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.style">
                                            <el-radio :label="1">仅首次</el-radio>
                                            <el-radio :label="2">多次</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row v-if="item.style==1" style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    进入商城只显示一次广告弹窗，再次进入商城依旧显示一次
                                </el-col>
                            </el-row>
                            <el-row v-if="item.style==2" style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    每次进入该商城页面显示广告弹窗
                                </el-col>
                            </el-row>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('popup')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
                <!-- 个人中心头部 -->
                <div v-if="templateForm.type=='user'" class="decorate-right-write">
                    <div class="select-style-item">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    导航背景色
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    导航背景
                                </div>
                            </el-col>
                            <el-col :xs="18" :sm="18">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                        <el-radio :label="1">色块</el-radio>
                                        <el-radio :label="2">图片</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box" v-if="templateForm.content.style==1">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    修改颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <p class="select-color">
                                        <el-input placeholder="" size="mini" v-model="templateForm.content.color">
                                        </el-input>
                                        <el-color-picker v-model="templateForm.content.color" size="small">
                                        </el-color-picker>
                                    </p>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box" v-if="templateForm.content.style=='2'">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    选择图片
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <img class="select-img image-border"
                                        :src="templateForm.content.image?Fast.api.cdnurl(templateForm.content.image):'/assets/addons/shopro/img/decorate/image-default.png'">
                                    <div class="btn-common margin-left-20 choosePicture" data-index="image">
                                        {{templateForm.content.image?'重新选择':'选择图片'}}
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                            <el-col :xs="16" :sm="16" :offset="6">
                                建议尺寸:750x320
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="templateForm.type=='float-button'" class="decorate-right-write">
                    <div class="select-style-item">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    按钮图片
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    按钮图片
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-image class="select-img select-imgzheng image-border"
                                        :src="Fast.api.cdnurl(templateForm.content.image)" fit="contain">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                    <div class="btn-common margin-left-20 choosePicture" data-index="image">
                                        {{templateForm.content.image?'重新选择':'选择图片'}}
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                            <el-col :xs="16" :sm="16" :offset="6">
                                建议尺寸:80x80
                            </el-col>
                        </el-row>
                    </div>
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:100}"
                        handle=".draggable-handle-move">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="display-flex" style="align-items: center;">
                                        <img class="draggable-handle-move"
                                            src="/assets/addons/shopro/img/decorate/move.png">
                                        <div class="select-style-item-tip">
                                            按钮编辑{{index+1}}
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <span @click.stop="rightDel(index)">删除</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        图标名称
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-input placeholder="最多4个文字" size="mini" v-model="item.name" maxlength="4">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        按钮图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img select-imgzheng image-border"
                                            :src="item.btnimage?Fast.api.cdnurl(item.btnimage):'/assets/addons/shopro/img/decorate/image-default2.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index"
                                            data-type="btn">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    建议尺寸:80x80
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        显示类型
                                    </div>
                                </el-col>
                                <el-col :xs="18" :sm="18">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.style">
                                            <el-radio :label="1">弹窗样式</el-radio>
                                            <el-radio :label="2">页面链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box" v-if="item.style==1">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        弹窗图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img image-border"
                                            :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/shopro/img/decorate/image-default.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <div v-if="item.style==2">
                                <el-row class="select-style-item-box">
                                    <el-col :xs="6" :sm="6">
                                        <div class="select-style-item-tip">
                                            选择链接:
                                        </div>
                                    </el-col>
                                    <el-col :xs="16" :sm="16">
                                        <div class="select-style-item-select">
                                            <el-radio-group class="item-radio-group" v-model="item.path_type"
                                                @change="isweblink(index)">
                                                <el-radio :label="1">系统链接</el-radio>
                                                <el-radio :label="2">外部链接</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row class="select-style-item-box">
                                    <el-col :xs="16" :sm="16" :offset="6">
                                        <div class="select-style-item-select" v-if="item.path_type==1">
                                            <div class="btn-common choosePath" :data-index="index">
                                                选择链接
                                            </div>
                                            <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                        </div>
                                        <div class="select-style-item-select" v-if="item.path_type==2">
                                            <el-input v-model="item.path" size="mini" placeholder="http(s)://">
                                            </el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('float-button')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 预览弹窗 -->
    <el-dialog title="模板预览" :visible="true" :before-close="previewClose" :class="previewDialog?'':'gg'" :modal="false">
        <div class="preview-body">
            <div class="web-preview">
                <template v-if="httpsDlocked">
                    <iframe v-if="iframeSrc && iframeSrc!=1" id="preview" :src="iframeSrc" frameborder="1"
                        height="600px"></iframe>
                    <div v-else>请在商城配置设置您的前端域名</div>
                </template>
                <template v-if="!httpsDlocked">
                    您的商城前端域名ssl未开启，请扫码预览
                </template>
            </div>
            <div class="code-preview">
                <div>
                    <div class="template-title">{{iframeTitle}}</div>
                    <div class="template-company">{{iframeCopyright[0]}}</div>
                    <div class="template-copyright">{{iframeCopyright[1]}}</div>
                    <div class="template-platform" v-if="iframePlatform">
                        <img v-for="i in iframePlatform.split(',')"
                            :src="'/assets/addons/shopro/img/decorate/'+i+'.png'">
                    </div>
                </div>
                <div v-if="qrcodeSrc" class="wechart-code">
                    <div class="code-item"><img class="code-item-img" :src="Fast.api.cdnurl(qrcodeSrc)" /></div>
                    <div class="code-title">微信扫描二维码即可预览</div>
                </div>
                <div v-if="wxacodeSrc" class="wechart-code">
                    <div class="code-item"><img class="code-item-img" :src="Fast.api.cdnurl(wxacodeSrc)" /></div>
                    <div class="code-title">微信扫描小程序即可预览</div>
                </div>
            </div>
        </div>
    </el-dialog>
    <el-drawer title="选择样式" :visible.sync="advdrawer" :with-header="false" size="342px">
        <div style="display: flex;flex-wrap: wrap;padding:15px;">
            <el-row :gutter="10">
                <el-col :xs="12" :sm="12" v-for="(i,index) in advStyleImage">
                    <img style="margin:10px 0;width:154px;height: 100px;" :src="i.src"
                        @click.stop="changeAdv(index,i.num)">
                </el-col>
            </el-row>
        </div>
    </el-drawer>
</div>